<?php $this->pageTitle = 'Cập nhật hình ảnh đại diện';?>
<div class="heading">
    <h1><a class = "title-page"><?php echo $this->pageTitle;?></a></h1>
    <div class="controls">

    </div>
</div>
<div class="content">
	<div class="user-profile" style="text-align: center;">
		<div class="left-column form" style="width: 665px;margin: auto;">
			<?php $form=$this->beginWidget('CActiveForm', 
					array(
						'id'=>'avatar-form',
						'htmlOptions' => array('enctype' => 'multipart/form-data'),
						'enableAjaxValidation'=>false,
						)
			); ?>
				<?php //echo $form->errorSummary($model); ?>
				<?php $this->beginWidget('ext.coolfieldset.JCollapsibleFieldset', array(
					'legend'=> 'Hình ảnh đại diện' ,
				)); ?>
				<table align="center">
					<tbody>
						<tr class="row" align="center">
							<td>
								<?php echo $form->error($member,'avatar'); ?>
								<div style="display:none;" id="error"><span class="errorMessage">Chỉ có các file với các định dạng sau được phép sử dụng: jpg, gif, png.</span></div>
								<br/>
							</td>
						</tr>
						<tr class="row" align="center">
							<td>
								<div class="border-grprofile"><?php echo CHtml::image(Util::getImageExist("profile", $member->avatar), "avatar",  array("class" =>"grprofile", "style" => "width: 250px;", "id" => "myimage"));?></div>
							</td>
						</tr>
						<tr class="row" align="center">
							<td>
								<br/>
								<?php echo $form->fileField($member,'avatar',array('size'=>60,'maxlength'=>255, "onchange" => "onFileSelected(event)")); ?>
							</td>
						</tr>
						<tr class="row" align="center">
							<td>
								<div class="row submit"><?php echo CHtml::submitButton(UserModule::t("Save"), array('class' => 'controls btn')); ?></div>
							</td>
						</tr>
					</tbody>
				</table>
			<?php $this->endWidget(); ?>
			<?php $this->endWidget(); ?>
		</div><!-- form -->
	</div>
</div>
<script>
var _validFileExtensions = [".jpg", ".gif", ".png"];
function hasExtension(fileName, exts) {
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}
function onFileSelected(event) {
	var selectedFile = event.target.files[0];
	var reader = new FileReader();
	var imgtag = document.getElementById("myimage");
	imgtag.title = selectedFile.name;
		
	reader.onload = function(event) {
		if (hasExtension(selectedFile.name, _validFileExtensions)) {
			document.getElementById("error").style.display="none";
			imgtag.src = event.target.result;
		}
		else {
			document.getElementById("error").style.display="block";
			imgtag.src = '<?php echo Util::getImageExist("profile", "");?>';
		}
		
  	};

  	reader.readAsDataURL(selectedFile);
}


</script>